<template>
  <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
    <ol @click="clickSong">
      <li v-for="song in songs" :key="song.id" :data-songId="song.id">
        <span
          :data-songId="song.id"
          :class="{ acvit: song.id == user.clickSong }"
          class="songName"
        >
          {{ song.name }}
        </span>

        <span :data-songId="song.id"> {{ song.artists[0].name }}</span>
      </li>
    </ol>
  </el-col>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "songSheet",
  data() {
    return {
      user: {
        clickSong: "526464145",
      },
    };
  },

  computed: {
    ...mapState({
      songs: (state) => state.songs,
    }),
  },

  methods: {
    clickSong(e) {
      const { dataset } = e.target;
      this.user.clickSong = dataset.songid;
    },
  },

  watch: {
    user: {
      immediate: true,
      deep: true,
      handler(value) {
        this.$store.commit("GETUSERCLICKSONGID", value.clickSong);
      },
    },
  },
};
</script>

<style scoped lang="less">
.el-col {
  height: 600px;
  overflow-y: auto;

  .songName {
    color: #f40;
    display: inline-block;
    width: 160px;
    position: relative;
    bottom: -4px;
  }

  .acvit {
    color: #029cfd;
    font-weight: 900;
  }

  ol li span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    margin-left: 5px;
  }
}
</style>